<template>
  <div class="grid-layout-adapter">
    <div class="cards-grid">
      <!-- 使用简单的flex布局替代vue-grid-layout -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'GridLayout',
  props: {
    layout: {
      type: Array,
      required: true
    },
    colNum: {
      type: Number,
      default: 12
    },
    rowHeight: {
      type: Number,
      default: 30
    },
    isDraggable: {
      type: Boolean,
      default: true
    },
    isResizable: {
      type: Boolean,
      default: true
    },
    verticalCompact: {
      type: Boolean,
      default: true
    },
    useCssTransforms: {
      type: Boolean,
      default: true
    },
    margin: {
      type: Array,
      default: () => [10, 10]
    },
    draggableRestrict: {
      type: Boolean,
      default: false
    }
  },
  emits: ['layout-updated'],
  setup(props, { emit }) {
    // 简单的布局更新函数
    const onLayoutUpdated = () => {
      emit('layout-updated', props.layout)
    }

    return {
      onLayoutUpdated
    }
  }
})
</script>

<style scoped>
.grid-layout-adapter {
  width: 100%;
}

.cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
</style>